<template>
    <view class="page">
        <view class="tab flex font-size-16 bac-color-fff flex text-center font-color-888">
            <view style="padding: 15px 0;"  class="tab-item flex-1 text-center flex flex-column align-center"
			@click="changeTab(index)" :class="{'active':tab_index==index}" v-for="(item,index) in tab" :key="index">
                <view>{{item.name}}</view>
                <view class="line mar-t-3"></view>
            </view>
        </view>
        <view class="list container" v-if="list.length">
            <navigator :url="'/pages/social/detail?id='+item.id" class="list-item bac-color-fff mar-t-10 flex align-center" v-for="(item,index) in list" :key="index">
                <!-- <view v-if="item.userType == 1">
                  <image class="avatar" :src="item.behelper.avatar">

                  </image>
                </view>
                <view v-else>
                  <image class="avatar" :src="item.volunteer.avatar">

                  </image>
                </view> -->
				<image class="avatar" :src="item.behelper.avatar">
				
				</image>

                <view class="flex-1 mar-l-8 flex flex-column justify-around">
                    <view class="font-bold font-size-15 font-color-666">
                          {{item.apply.child_usernme}}
                    </view>
                    <block v-if="item.help_num >0">
                    <view class="font-color-bf font-size-13 mar-t-3" >
                        记录：第{{item.help_num}}次记录
                    </view>
                    <view class="font-color-bf font-size-13 mar-t-3">
                        上次记录：{{transformTime(item.update_time)}}
                    </view>
                    </block>
                    <block v-else>
                        <view class="font-color-bf font-size-13 mar-t-10">
                            暂无帮扶记录
                        </view>
                    </block>
                </view>
                <view class="text-center flex flex-column align-center justify-center">
                    <view class="look-btn font-size-12">查看详情</view>
                    <view class="font-color-bf font-size-12 mar-t-5" v-if="item.status==0">已解除</view>
                    <view class="font-color-bf font-size-12 mar-t-5" v-else-if="item.status==1">进行中</view>
                    <view class="font-color-bf font-size-12 mar-t-5" v-else-if="item.status==2">待评价</view>
                     <view class="font-color-bf font-size-12 mar-t-5" v-else-if="item.status==3">已完结</view>
                </view>
            </navigator>
        </view>
		<no-data v-else></no-data>
    </view>
</template>

<script>
import {helpTab,myHelp} from '@/utils/http'
export default {
    data() {
        return {
            index_page:0,
            total_page:1,
            list:[],
            tab:[],
            tab_index:0,
        }
    },
    methods: {
        async getTab(){
            await helpTab().then(res=>{
                console.log(res);
                this.tab = res;
            })
        },
        init(){
            this.index_page = 0 ;
            this.total_page = 1;
            this.list = [];
        },
        changeTab(i){
            this.tab_index = i
            this.init();
            this.myhelp();
        },
        myhelp(){
            let current_tab = this.tab[this.tab_index];
            myHelp({status:current_tab.status,page: this.index_page + 1,type:this.tab_index}).then(res=>{
                if (res) {
					let list = []
					this.index_page = res.current_page
					this.total_page = res.last_page
					if(res.data==null){
						list = []
					}else{
						list = res.data
					}
					this.list = [...this.list, ...list]
				}
            })
        },
        
        doHelp(order_no){
            this.href('/pages/social/do_help?order_no='+order_no)
        }   
        
    },
    //下拉刷新
	onPullDownRefresh() {
		this.index_page = 0
		this.total_page = 1
		this.list = []
		// this.getCate()
		// this.myApply()
	},
	//上拉加载
	onReachBottom() {
		if (this.index_page < this.total_page) {
			// this.myApply()
		}
	},
    async onLoad(){
        this.init()
        await this.getTab();
        this.myhelp();
    }
}
</script>

<style scoped>
page{
    background-color: #F4F5FA !important;
}
.tab .active{
    color: #0088FF;
    font-weight: bold;
    /* width: 140rpx; */
}
.tab .tab-item{
    padding: 20rpx 20rpx;
}
.list-item{
    padding: 20rpx;
}
.list-item .tag{
    padding: 2px 5px;
    background:linear-gradient(to right,#2F82FA ,#4AB9FC);
    border-radius:10px;
}
.btn{
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
}
.tab-item.active .line{
    width: 30px;
    height: 2px;
    background-color: #0088FF;
    box-sizing: border-box;
}

.list-item .avatar{
    height: 55px;
    width: 55px;
}
.list-item .look-btn{
  
    background-color: #FF5C00;
    padding: 5px 8px;
    color: #fff;
    border-radius: 8px;
}
.list-item .complete-icon{
    height: 55px;
    width: 55px
}
</style>